<template>
  <div class="ai-analyze-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h3>社保数据AI分析</h3>
        </div>
      </template>

      <el-form :model="formData" label-width="120px">
        <el-form-item label="数据类型">
          <el-select v-model="formData.dataType" placeholder="请选择数据类型">
            <el-option label="参保人数据" value="insured" />
            <el-option label="缴费数据" value="payment" />
            <el-option label="待遇数据" value="benefit" />
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="formData.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="分析维度">
          <el-checkbox-group v-model="formData.dimensions">
            <el-checkbox label="age" size="large">年龄分布</el-checkbox>
            <el-checkbox label="gender" size="large">性别比例</el-checkbox>
            <el-checkbox label="region" size="large">地区分布</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="startAnalysis" :loading="analyzing">
            开始分析
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div v-if="showResults" class="results-container">
      <!-- 分析摘要 -->
      <el-card class="summary-card" v-if="analysisSummary">
        <template #header>
          <div class="card-header">
            <h3>分析摘要</h3>
          </div>
        </template>
        <div class="summary-content">
          <el-alert
            type="info"
            :closable="false"
            show-icon
          >
            <p>{{ analysisSummary }}</p>
          </el-alert>
        </div>
      </el-card>

      <!-- 图表展示区域 -->
      <el-row :gutter="20">
        <!-- 年龄分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" v-if="formData.dimensions.includes('age')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>年龄分布</h3>
              </div>
            </template>
            <div ref="ageChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 性别比例 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" v-if="formData.dimensions.includes('gender')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>性别比例</h3>
              </div>
            </template>
            <div ref="genderChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 地区分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" v-if="formData.dimensions.includes('region')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>地区分布</h3>
              </div>
            </template>
            <div ref="regionChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 时间序列数据 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>时间序列分析</h3>
              </div>
            </template>
            <div ref="timeSeriesChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 政策指标 -->
      <el-card class="metrics-card" v-if="policyMetrics">
        <template #header>
          <div class="card-header">
            <h3>政策指标</h3>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-statistic title="覆盖率" :value="policyMetrics.coverage_rate" :precision="2">
              <template #suffix>
                <span>%</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="12">
            <el-statistic title="新增参保人数" :value="policyMetrics.new_registrations" />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 表单数据
const formData = reactive({
  dataType: '',
  dateRange: [],
  dimensions: []
})

// 状态变量
const analyzing = ref(false)
const showResults = ref(false)
const analysisSummary = ref<string>('')
const policyMetrics = ref<any>(null)

// 图表引用
const ageChartRef = ref<HTMLElement | null>(null)
const genderChartRef = ref<HTMLElement | null>(null)
const regionChartRef = ref<HTMLElement | null>(null)
const timeSeriesChartRef = ref<HTMLElement | null>(null)

// 图表实例
let ageChart: echarts.ECharts | null = null
let genderChart: echarts.ECharts | null = null
let regionChart: echarts.ECharts | null = null
let timeSeriesChart: echarts.ECharts | null = null
let eventSource: EventSource | null = null

// 清理字符串中的特殊字符和格式问题
const cleanString = (input: string): string => {
  if (!input) return '';

  // 移除反引号，这是导致解析错误的主要原因
  let cleaned = input.replace(/`/g, '');

  // 移除Markdown代码块标记 - 增强处理各种格式的代码块
  cleaned = cleaned.replace(/```\s*json\s*/gi, ''); // 处理```json
  cleaned = cleaned.replace(/```\s*javascript\s*/gi, ''); // 处理```javascript
  cleaned = cleaned.replace(/```\s*/g, ''); // 处理其他```
  
  // 处理单独的json行（特别处理"json\n{"格式）
  if (cleaned.match(/^\s*json\s*\n\s*\{/im)) {
    console.log('检测到json\n{格式，进行特殊处理');
    const jsonMatch = cleaned.match(/json\s*\n\s*(\{[\s\S]*)/i);
    if (jsonMatch && jsonMatch[1]) {
      cleaned = jsonMatch[1];
      console.log('成功提取json\n后的内容');
    }
  } else {
    cleaned = cleaned.replace(/^json\s*\n/gim, ''); // 处理其他单独的json行
  }

  // 移除思考链标记内容
  cleaned = cleaned.replace(/<think>[\s\S]*?<\/think>/g, '');

  // 处理可能导致JSON解析错误的其他特殊字符
  cleaned = cleaned.replace(/\\([^"\\bfnrtu])/g, '$1'); // 移除不必要的转义
  
  // 移除JSON前的非JSON字符
  const jsonStartIndex = cleaned.indexOf('{');
  if (jsonStartIndex > 0) {
    cleaned = cleaned.substring(jsonStartIndex);
  }

  return cleaned;
};

// 增强的JSON解析函数 - 基于sse.html中的parseSSEData实现
const isInThinkTag = ref(false);
const accumulatedContent = ref('');
const accumulatedFinalContent = ref(''); // 专门用于累积最终答案内容

// 增强的JSON解析函数 - 处理特殊字符和格式问题
const tryParseJSON = (str: string) => {

  // 先尝试清理字符串
  const cleanedStr = cleanString(str);
  
  try {
    // 先尝试直接解析清理后的字符串
    const parsed = JSON.parse(cleanedStr);

    // 检查是否直接返回了 reasoning_content
    const directReasoning = parsed.choices?.[0]?.delta?.reasoning_content;
    if (directReasoning) {
      // 忽略推理内容，只处理实际内容
      const content = parsed.choices?.[0]?.delta?.content || '';
      if (content) {
        accumulatedFinalContent.value += content;
      }

      // 尝试解析累积的最终内容
      try {
        const cleanedContent = cleanString(accumulatedFinalContent.value);
        return JSON.parse(cleanedContent);
      } catch (e) {
        // 内容还不完整，继续累积
        console.log('最终内容累积中:', accumulatedFinalContent.value.length, '字符');
        return null;
      }
    }

    // 处理标准格式
    const content = parsed.choices?.[0]?.delta?.content || '';

    // 处理 think 标签包裹的情况
    if (content.includes('<think>')) {
      isInThinkTag.value = true;
      // 提取think标签之前的内容作为最终答案
      const beforeThink = content.substring(0, content.indexOf('<think>'));
      if (beforeThink) {
        accumulatedFinalContent.value += beforeThink;
      }
      return null;
    }

    if (content.includes('</think>')) {
      isInThinkTag.value = false;
      // 提取think标签之后的内容作为最终答案
      const afterThink = content.substring(content.indexOf('</think>') + '</think>'.length);
      if (afterThink) {
        accumulatedFinalContent.value += afterThink;
      }
      return null;
    }

    // 根据状态决定内容归属
    if (!isInThinkTag.value && content) {
      // 不在think标签内的内容都是最终答案
      accumulatedFinalContent.value += content;

      // 尝试解析累积的最终内容
      try {
        const cleanedContent = cleanString(accumulatedFinalContent.value);
        return JSON.parse(cleanedContent);
      } catch (e) {
        // 内容还不完整，继续累积
        console.log('最终内容累积中:', accumulatedFinalContent.value.length, '字符');
        return null;
      }
    } else if (isInThinkTag.value && content) {
      // 在think标签内的内容是推理过程，忽略
      return null;
    }

    // 验证是否为新的数据格式
    if (parsed.analysis_result) {
      return parsed.analysis_result;
    }
    // 兼容旧格式
    if (parsed.xAxis && parsed.series) {
      return parsed;
    }
  } catch (e) {
    // 尝试清理并解析
    try {
      // 清理字符串并尝试解析
      const cleanStr = cleanString(str);
      const directParsed = JSON.parse(cleanStr);
      return directParsed;
    } catch (e1) {
      // 如果直接解析失败，将清理后的内容添加到累积内容中
      try {
        const cleanStr = cleanString(str);
        accumulatedFinalContent.value += cleanStr;
        const cleanedFinal = cleanString(accumulatedFinalContent.value);
        return JSON.parse(cleanedFinal);
      } catch (e2) {
        console.log('JSON解析失败，继续累积内容');
        return null;
      }
    }
  }
  return null;
};

// 开始分析
const startAnalysis = async () => {
  if (!formData.dataType || !formData.dateRange.length || !formData.dimensions.length) {
    ElMessage.warning('请完整填写分析条件')
    return
  }

  // 重置状态
  analyzing.value = true
  showResults.value = true
  analysisSummary.value = ''
  policyMetrics.value = null
  accumulatedContent.value = '' // 重置累积的内容
  accumulatedFinalContent.value = '' // 重置最终答案累积内容
  isInThinkTag.value = false // 重置思考标签状态

  if (eventSource) eventSource.close()

  const params = new URLSearchParams({
    dataType: formData.dataType,
    startDate: formData.dateRange[0],
    endDate: formData.dateRange[1],
    dimensions: formData.dimensions.join(',')
  })

  eventSource = new EventSource(`http://localhost:8090/api/ai/analyze/social-insurance?${params}`)

  // 确保图表容器已准备好
  nextTick(() => {
    refreshAllCharts();
  });

  // 处理数据消息
  eventSource.onmessage = (event) => {
    // console.log('收到数据流消息:', event.data.substring(0, 100) + (event.data.length > 100 ? '...' : ''));
    lastDataTime = Date.now(); // 更新最后接收数据时间

    try {
      const jsonData = tryParseJSON(event.data);
      if (jsonData) {
        console.log('成功解析JSON数据:', JSON.stringify(jsonData, null, 2).substring(0, 500) + (JSON.stringify(jsonData).length > 500 ? '...' : ''));
        updateCharts(jsonData);
      } else {
        // console.log('无法解析为JSON的数据:', event.data);
      }
    } catch (e) {
      console.error('解析JSON数据时出错:', e);
    }

    // 检查是否为最后一条消息
    if (event.data.includes('"final":true') || event.data.includes('"done":true')) {
      console.log('检测到最后一条消息标记');
      if (dataTimeoutCheck) {
        clearInterval(dataTimeoutCheck);
        dataTimeoutCheck = null;
      }
      if (globalTimeoutId) {
        clearTimeout(globalTimeoutId);
        globalTimeoutId = null;
      }
      finishAnalysis();
    }
  }

  // 处理数据流完成 - 服务器端可能会发送一个特殊的事件类型
  // 使用一个函数处理所有结束事件，避免多次调用finishAnalysis
  const handleStreamEnd = (eventName) => (e) => {
    console.log(`数据流接收完成(${eventName}事件)`, e);
    // 清除定时器，避免重复调用
    if (dataTimeoutCheck) {
      clearInterval(dataTimeoutCheck);
      dataTimeoutCheck = null;
    }
    if (globalTimeoutId) {
      clearTimeout(globalTimeoutId);
      globalTimeoutId = null;
    }
    finishAnalysis();
  };
  
  // 添加各种结束事件监听器
  eventSource.addEventListener('complete', handleStreamEnd('complete'));
  eventSource.addEventListener('done', handleStreamEnd('done'));
  eventSource.addEventListener('end', handleStreamEnd('end'));
  
  // 添加错误事件监听 - 只定义一次onerror处理函数
  eventSource.onerror = (e) => {
    console.log("数据流错误", e);
    
    // 清理定时器，避免后续操作
    if (dataTimeoutCheck) {
      clearInterval(dataTimeoutCheck);
      dataTimeoutCheck = null;
    }
    if (globalTimeoutId) {
      clearTimeout(globalTimeoutId);
      globalTimeoutId = null;
    }
    
    ElMessage.error('分析过程中发生错误')
    analyzing.value = false
    eventSource?.close()
    eventSource = null;
    
    // 尝试渲染已有数据
    setTimeout(() => {
      try {
        refreshAllCharts();
      } catch (err) {
        console.error('错误后刷新图表失败:', err);
      }
    }, 500);
  };

  // 设置全局超时处理，确保即使没有收到结束事件也能完成分析
  let globalTimeoutId = setTimeout(() => {
    if (analyzing.value) {
      console.log('分析超时，强制完成');
      if (dataTimeoutCheck) {
        clearInterval(dataTimeoutCheck);
        dataTimeoutCheck = null;
      }
      finishAnalysis();
    }
  }, 60000); // 60秒超时

  const extractPartialData = (content: string) => {
  try {
    // 先清理内容
    let cleanedContent = cleanString(content);
    
    // 检查是否包含markdown代码块标记
    if (content.includes('```json') || content.includes('json\n{')) {
      console.log('extractPartialData: 检测到markdown代码块标记');
      // 提取JSON部分
      const jsonMatch = content.match(/```json\s*([\s\S]*?)```/) || 
                      content.match(/json\s*\n([\s\S]*)/i);
      if (jsonMatch && jsonMatch[1]) {
        cleanedContent = cleanString(jsonMatch[1]);
        console.log('extractPartialData: 从markdown代码块中提取JSON内容');
        // 尝试直接解析完整JSON
        try {
          return JSON.parse(cleanedContent);
        } catch (parseError) {
          console.log('extractPartialData: 完整JSON解析失败，尝试提取部分');
          // 继续尝试提取部分
        }
      }
    }
    
    // 尝试提取analysis_result部分
    const analysisResultMatch = cleanedContent.match(/"analysis_result"\s*:\s*\{([\s\S]*?)\}(?=,|\}|$)/);
    if (analysisResultMatch) {
      const partialJson = `{"analysis_result":${analysisResultMatch[0]}}`;
      return JSON.parse(partialJson);
    }
    
    // 尝试提取summary部分
    const summaryMatch = cleanedContent.match(/"summary"\s*:\s*"([^"]*)"/);
    if (summaryMatch) {
      return { summary: summaryMatch[1] };
    }
    
    // 尝试查找任何有效的JSON对象
    const jsonStartIndex = cleanedContent.indexOf('{');
    const jsonEndIndex = cleanedContent.lastIndexOf('}');
    if (jsonStartIndex >= 0 && jsonEndIndex > jsonStartIndex) {
      try {
        const possibleJson = cleanedContent.substring(jsonStartIndex, jsonEndIndex + 1);
        return JSON.parse(possibleJson);
      } catch (jsonError) {
        console.log('extractPartialData: 提取JSON对象失败');
      }
    }
    
    return null;
  } catch (e) {
    console.error('提取部分数据失败:', e);
    return null;
  }
};

// 处理数据流结束
const finishAnalysis = () => {
  // 防止多次调用
  if (!analyzing.value) {
    console.log('分析已完成，忽略重复调用');
    return;
  }

  // 立即设置analyzing为false，防止重复调用
  analyzing.value = false;
  
  console.log('执行分析完成处理');
  
  // 清理所有定时器和事件源
  if (eventSource) {
    // 移除所有事件监听器
    eventSource.onmessage = null;
    eventSource.onerror = null;
    // 关闭连接
    eventSource.close();
    eventSource = null;
  }
  
  // 确保图表已刷新
  setTimeout(() => {
    try {
      refreshAllCharts();
      ElMessage.success('分析完成');
    } catch (err) {
      console.error('完成分析后刷新图表失败:', err);
      ElMessage.warning('分析完成，但图表渲染可能不完整');
    }
  }, 300);

  // 尝试最后一次解析累积的内容
  try {
    if (accumulatedFinalContent.value) {
      console.log('尝试最后一次解析累积的最终内容');
      // 使用增强的清理函数处理内容
      let cleanedContent = cleanString(accumulatedFinalContent.value);
      
      // 检查是否包含markdown代码块标记
      if (accumulatedFinalContent.value.includes('```json') || accumulatedFinalContent.value.includes('json\n{')) {
        console.log('检测到markdown代码块标记，进行特殊处理');
        // 提取JSON部分
        const jsonMatch = accumulatedFinalContent.value.match(/```json\s*([\s\S]*?)```/) || 
                         accumulatedFinalContent.value.match(/json\s*\n([\s\S]*)/i);
        if (jsonMatch && jsonMatch[1]) {
          cleanedContent = cleanString(jsonMatch[1]);
          console.log('从markdown代码块中提取JSON内容');
        }
      }
      
      // 检查内容是否包含完整的JSON结构
      const hasCompleteJson = cleanedContent.includes('{') && 
                            cleanedContent.includes('}') && 
                            (cleanedContent.includes('"analysis_result"') || 
                             cleanedContent.includes('"summary"'));
      
      try {
        // 尝试处理可能带有前缀的JSON
        if (cleanedContent.includes('json\n{')) {
          console.log('检测到json\n{格式，进行特殊处理');
          const jsonMatch = cleanedContent.match(/json\s*\n([\s\S]*)/i);
          if (jsonMatch && jsonMatch[1]) {
            cleanedContent = cleanString(jsonMatch[1]);
            console.log('提取json\n后的内容');
          }
        }
        
        let finalData = null;
        try {
          finalData = hasCompleteJson ? JSON.parse(cleanedContent) : null;
        } catch (jsonError) {
          console.log('JSON解析失败，尝试移除前缀后再解析');
          // 尝试移除所有非JSON前缀
          const jsonStartIndex = cleanedContent.indexOf('{');
          if (jsonStartIndex > 0) {
            const jsonContent = cleanedContent.substring(jsonStartIndex);
            try {
              finalData = JSON.parse(jsonContent);
              console.log('移除前缀后成功解析JSON');
            } catch (e) {
              console.log('移除前缀后仍然无法解析JSON');
            }
          }
        }
        
        if (finalData) {
          console.log('成功解析最终累积内容');
          console.log('最终数据:', finalData);
          updateCharts(finalData);
        } else if (hasCompleteJson) {
          // 尝试提取部分有效数据
          const partialData = extractPartialData(cleanedContent);
          if (partialData) {
            console.log('使用部分有效数据');
            updateCharts(partialData);
          }
        }
      } catch (parseError) {
        console.error('JSON解析失败，尝试提取有效部分:', parseError);

        // 尝试提取可能的有效JSON部分
        try {
          // 检查是否包含markdown代码块标记
          if (cleanedContent.includes('```json') || cleanedContent.includes('json\n{')) {
            console.log('检测到可能的markdown格式，尝试提取');
            const jsonMatch = cleanedContent.match(/```json\s*([\s\S]*?)```/) || 
                           cleanedContent.match(/json\s*\n([\s\S]*)/i);
            if (jsonMatch && jsonMatch[1]) {
              const extractedJson = cleanString(jsonMatch[1]);
              try {
                const finalData = JSON.parse(extractedJson);
                console.log('成功从markdown格式中提取JSON数据');
                updateCharts(finalData);
                return; // 成功处理，直接返回
              } catch (e) {
                console.log('从markdown提取的内容仍无法解析');
              }
            }
          }
          
          // 查找可能的JSON开始位置
          const jsonStartIndex = cleanedContent.indexOf('{');
          const jsonEndIndex = cleanedContent.lastIndexOf('}');

          if (jsonStartIndex >= 0 && jsonEndIndex > jsonStartIndex) {
            const possibleJson = cleanedContent.substring(jsonStartIndex, jsonEndIndex + 1);
            const finalData = JSON.parse(possibleJson);
            console.log('成功从部分内容中提取JSON数据')
              updateCharts(finalData);
            }
          } catch (extractError) {
            console.error('无法从内容中提取有效JSON:', extractError);
          }
        }
      }
    } catch (e) {
      console.error('最终内容处理失败:', e);
    }

    // 强制重新渲染所有图表
    setTimeout(() => {
      try {
        refreshAllCharts();
        // 注意：analyzing.value已经在函数开始时设置为false
        ElMessage.success('分析完成');
      } catch (e) {
        console.error('最终图表渲染失败:', e);
        ElMessage.warning('分析完成，但图表渲染可能不完整');
      }
    }, 500);
  };

  // 数据接收超时检查 - 使用一个变量保存定时器ID，方便后续清理
  let lastDataTime = Date.now();
  let dataTimeoutCheck = setInterval(() => {
    if (Date.now() - lastDataTime > 5000 && analyzing.value) {
      console.log('5秒内未收到新数据，自动结束分析');
      clearInterval(dataTimeoutCheck);
      dataTimeoutCheck = null;
      finishAnalysis();
    }
  }, 1000);

  

  eventSource.onerror = (e) => {
    console.log("数据流错误",e);
    
    // 清理定时器，避免后续操作
    if (dataTimeoutCheck) {
      clearInterval(dataTimeoutCheck);
      dataTimeoutCheck = null;
    }
    if (globalTimeoutId) {
      clearTimeout(globalTimeoutId);
      globalTimeoutId = null;
    }
    
    ElMessage.error('分析过程中发生错误')
    analyzing.value = false
    eventSource?.close()
    eventSource = null;
    
    // 尝试渲染已有数据
    setTimeout(() => {
      try {
        refreshAllCharts();
      } catch (err) {
        console.error('错误后刷新图表失败:', err);
      }
    }, 500);
  }
}

// 刷新所有图表 - 优化版本，更可靠地初始化和刷新图表
const refreshAllCharts = () => {
  console.log('刷新所有图表');

  try {
    // 确保图表实例存在 - 如果DOM存在但图表实例不存在，则重新初始化
    if (ageChartRef.value) {
      try {
        if (!ageChart) {
          ageChart = echarts.init(ageChartRef.value);
          console.log('年龄分布图表实例初始化完成');
        } else {
          // 如果图表实例已存在，尝试清空并重新设置大小
          ageChart.clear();
          ageChart.resize();
        }
      } catch (e) {
        console.error('初始化或刷新年龄分布图表失败:', e);
        // 尝试重新创建图表实例
        try {
          if (ageChart) {
            ageChart.dispose();
          }
          ageChart = echarts.init(ageChartRef.value);
        } catch (e2) {
          console.error('重新创建年龄分布图表失败:', e2);
        }
      }
    }

    if (genderChartRef.value) {
      try {
        if (!genderChart) {
          genderChart = echarts.init(genderChartRef.value);
          console.log('性别比例图表实例初始化完成');
        } else {
          genderChart.clear();
          genderChart.resize();
        }
      } catch (e) {
        console.error('初始化或刷新性别比例图表失败:', e);
        try {
          if (genderChart) {
            genderChart.dispose();
          }
          genderChart = echarts.init(genderChartRef.value);
        } catch (e2) {
          console.error('重新创建性别比例图表失败:', e2);
        }
      }
    }

    if (regionChartRef.value) {
      try {
        if (!regionChart) {
          regionChart = echarts.init(regionChartRef.value);
          console.log('地区分布图表实例初始化完成');
        } else {
          regionChart.clear();
          regionChart.resize();
        }
      } catch (e) {
        console.error('初始化或刷新地区分布图表失败:', e);
        try {
          if (regionChart) {
            regionChart.dispose();
          }
          regionChart = echarts.init(regionChartRef.value);
        } catch (e2) {
          console.error('重新创建地区分布图表失败:', e2);
        }
      }
    }

    if (timeSeriesChartRef.value) {
      try {
        if (!timeSeriesChart) {
          timeSeriesChart = echarts.init(timeSeriesChartRef.value);
          console.log('时间序列图表实例初始化完成');
        } else {
          timeSeriesChart.clear();
          timeSeriesChart.resize();
        }
      } catch (e) {
        console.error('初始化或刷新时间序列图表失败:', e);
        try {
          if (timeSeriesChart) {
            timeSeriesChart.dispose();
          }
          timeSeriesChart = echarts.init(timeSeriesChartRef.value);
        } catch (e2) {
          console.error('重新创建时间序列图表失败:', e2);
        }
      }
    }
  } catch (error) {
    console.error('刷新图表时发生错误:', error);
  }
};

// 更新所有图表
const updateCharts = (data: any) => {
  // 数据有效性检查
  if (!data) {
    console.log('接收到无效数据');
    return; // 数据无效，直接返回
  }
  
  // 确保图表容器已准备好
  refreshAllCharts();

  try {
    console.log('接收到数据类型:', typeof data, '数据预览:', JSON.stringify(data));
    console.log('详细数据检查:', {
      demographics: !!data.demographics,
      time_series: !!data.time_series,
      policy_metrics: !!data.policy_metrics
    });
    
    // 调试日志：检查DOM元素是否存在
    console.log('图表DOM元素状态:', {
      ageChartRef: !!ageChartRef.value,
      genderChartRef: !!genderChartRef.value,
      regionChartRef: !!regionChartRef.value,
      timeSeriesChartRef: !!timeSeriesChartRef.value
    });
    
    // 调试日志：检查图表实例是否已初始化
    console.log('图表实例状态:', {
      ageChart: !!ageChart,
      genderChart: !!genderChart,
      regionChart: !!regionChart,
      timeSeriesChart: !!timeSeriesChart
    });
    
  } catch (e) {
    console.log('接收到数据类型:', typeof data, '无法序列化数据预览');
  }

  // 确保所有图表实例已初始化
  // 注意：这里不使用nextTick，避免递归调用和异步问题
  // 直接初始化图表实例
  console.log('检查图表DOM状态:', {
    ageChartRef: !!ageChartRef.value,
    genderChartRef: !!genderChartRef.value,
    regionChartRef: !!regionChartRef.value,
    timeSeriesChartRef: !!timeSeriesChartRef.value
  });
  
  // 初始化所有图表实例
  if (ageChartRef.value && !ageChart) {
    try {
      ageChart = echarts.init(ageChartRef.value);
      console.log('年龄分布图表实例初始化完成');
    } catch (e) {
      console.error('初始化年龄分布图表失败:', e);
    }
  }
  if (genderChartRef.value && !genderChart) {
    try {
      genderChart = echarts.init(genderChartRef.value);
      console.log('性别比例图表实例初始化完成');
    } catch (e) {
      console.error('初始化性别比例图表失败:', e);
    }
  }
  if (regionChartRef.value && !regionChart) {
    try {
      regionChart = echarts.init(regionChartRef.value);
      console.log('地区分布图表实例初始化完成');
    } catch (e) {
      console.error('初始化地区分布图表失败:', e);
    }
  }
  if (timeSeriesChartRef.value && !timeSeriesChart) {
    try {
      timeSeriesChart = echarts.init(timeSeriesChartRef.value);
      console.log('时间序列图表实例初始化完成');
    } catch (e) {
      console.error('初始化时间序列图表失败:', e);
    }
  }

  // 处理旧格式数据
  if (data.xAxis && data.series) {
    if (timeSeriesChartRef.value) {
      try {
        // 确保图表实例存在
        if (!timeSeriesChart) {
          console.log('初始化时间序列图表');
          timeSeriesChart = echarts.init(timeSeriesChartRef.value);
          console.log('时间序列图表实例创建成功:', !!timeSeriesChart);
        }

        console.log('设置时间序列图表数据');
        const option = {
          title: { text: '社保数据分析结果' },
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: data.xAxis },
          yAxis: { type: 'value' },
          series: [{
            name: '数值',
            type: 'line',
            smooth: true,
            data: data.series,
            itemStyle: { color: '#5470C6' },
            areaStyle: { color: '#5470C633' }
          }]
        };
        timeSeriesChart.setOption(option, true); // 使用true参数强制清除之前的设置
        timeSeriesChart.resize();
        console.log('时间序列图表更新完成');
      } catch (error) {
        console.error('更新时间序列图表失败:', error);
      }
    } else {
      console.warn('时间序列图表DOM引用不存在');
    }
    return;
  };

  // 处理新格式数据
  try {
    // 1. 更新摘要
    if (data.summary) {
      try {
        analysisSummary.value = typeof data.summary === 'string' ? data.summary : JSON.stringify(data.summary);
      } catch (e) {
        console.error('处理摘要数据时出错:', e);
        // 设置一个默认摘要，避免UI显示问题
        analysisSummary.value = '分析完成，但摘要数据处理出现问题';
      }
    }

    // 2. 更新人口统计图表
    if (data.demographics) {
      try {
        // 年龄分布饼图
        if (ageChartRef.value && data.demographics.age_distribution && formData.dimensions.includes('age')) {
          // 确保图表实例存在
          if (!ageChart) {
            ageChart = echarts.init(ageChartRef.value);
          }
          try {
            // 安全地处理数据，确保是有效的对象
            const ageDistribution = typeof data.demographics.age_distribution === 'object' && data.demographics.age_distribution !== null
              ? data.demographics.age_distribution
              : {};

            const ageData = Object.entries(ageDistribution).map(([name, value]) => ({
              name,
              value: typeof value === 'number' ? value : 0
            }));

            ageChart.setOption({
              animation: true,
              tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
              legend: { orient: 'vertical', left: 'left' },
              series: [{
                name: '年龄分布',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                label: { show: true, formatter: '{b}: {c}人' },
                emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
                labelLine: { show: true },
                data: ageData
              }]
            });
            ageChart.resize();
          } catch (error) {
            console.error('更新年龄分布图表失败:', error);
          }
        }
      } catch (demographicsError) {
        console.error('处理人口统计数据时出错:', demographicsError);
      }

      try {
        // 性别比例饼图
        if (genderChartRef.value && data.demographics.gender_ratio && formData.dimensions.includes('gender')) {
          // 确保图表实例存在
          if (!genderChart) {
            genderChart = echarts.init(genderChartRef.value);
          }
          try {
            // 安全地处理数据
            const genderRatio = typeof data.demographics.gender_ratio === 'object' && data.demographics.gender_ratio !== null
              ? data.demographics.gender_ratio
              : { male: 50, female: 50 }; // 默认值

            const genderData = Object.entries(genderRatio).map(([name, value]) => ({
              name: name === 'male' ? '男性' : '女性',
              value: typeof value === 'number' ? value : 0
            }));

            genderChart.setOption({
              animation: true,
              tooltip: { trigger: 'item', formatter: '{b}: {c}% ({d}%)' },
              legend: { orient: 'vertical', left: 'left' },
              color: ['#5470C6', '#EE6666'],
              series: [{
                name: '性别比例',
                type: 'pie',
                radius: '50%',
                data: genderData,
                emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
              }]
            });
            genderChart.resize();
          } catch (error) {
            console.error('更新性别比例图表失败:', error);
          }
        }
      } catch (genderError) {
        console.error('处理性别比例数据时出错:', genderError);
      }

      try {
        // 地区分布图
        if (regionChartRef.value && data.demographics.region_distribution && formData.dimensions.includes('region')) {
          // 确保图表实例存在
          if (!regionChart) {
            regionChart = echarts.init(regionChartRef.value);
          }
          try {
            // 安全地处理数据
            const regionDistribution = typeof data.demographics.region_distribution === 'object' && data.demographics.region_distribution !== null
              ? data.demographics.region_distribution
              : {};

            const regionData = Object.entries(regionDistribution).map(([name, value]) => ({
              name,
              value: typeof value === 'number' ? value : 0
            }));

            regionChart.setOption({
              animation: true,
              tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
              series: [{
                name: '地区分布',
                type: 'pie',
                radius: '50%',
                data: regionData,
                emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
              }]
            });
            regionChart.resize();
          } catch (error) {
            console.error('更新地区分布图表失败:', error);
          }
        }
      } catch (regionError) {
        console.error('处理地区分布数据时出错:', regionError);
      }
    }

    // 3. 更新时间序列图表
    try {
      if (data.time_series && timeSeriesChartRef.value) {
        // 确保图表实例存在
        if (!timeSeriesChart) {
          timeSeriesChart = echarts.init(timeSeriesChartRef.value);
        }
        try {
          // 安全地处理数据
          const timeSeries = data.time_series || {};
          const dates = Array.isArray(timeSeries.dates) ? timeSeries.dates : [];
          const actualValues = Array.isArray(timeSeries.actual_values) ? timeSeries.actual_values : [];
          const predictions = Array.isArray(timeSeries.predictions) ? timeSeries.predictions : [];

          timeSeriesChart.setOption({
            animation: true,
            tooltip: { trigger: 'axis' },
            legend: { data: ['实际值', '预测值'] },
            xAxis: { type: 'category', data: dates },
            yAxis: { type: 'value' },
            series: [
              {
                name: '实际值',
                type: 'line',
                data: actualValues,
                itemStyle: { color: '#5470C6' }
              },
              {
                name: '预测值',
                type: 'line',
                data: predictions,
                itemStyle: { color: '#91CC75' },
                lineStyle: { type: 'dashed' }
              }
            ]
          });
          timeSeriesChart.resize();
        } catch (error) {
          console.error('更新时间序列图表失败:', error);
        }
      }
    } catch (timeSeriesError) {
      console.error('处理时间序列数据时出错:', timeSeriesError);
    }

    // 4. 更新政策指标
    try {
      if (data.policy_metrics) {
        policyMetrics.value = data.policy_metrics;
      }
    } catch (metricsError) {
      console.error('处理政策指标数据时出错:', metricsError);
    }
  } catch (error) {
    console.error('处理图表数据时出错:', error);
  }

  analyzing.value = false;
};

// 初始化图表
onMounted(() => {
  console.log('组件挂载，初始化图表');
  // 使用nextTick确保DOM已经渲染
  nextTick(() => {
    // 初始化各个图表
    try {
      if (ageChartRef.value) {
        console.log('初始化年龄分布图表');
        ageChart = echarts.init(ageChartRef.value);
      }
      if (genderChartRef.value) {
        console.log('初始化性别比例图表');
        genderChart = echarts.init(genderChartRef.value);
      }
      if (regionChartRef.value) {
        console.log('初始化地区分布图表');
        regionChart = echarts.init(regionChartRef.value);
      }
      if (timeSeriesChartRef.value) {
        console.log('初始化时间序列图表');
        timeSeriesChart = echarts.init(timeSeriesChartRef.value);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  });

  // 添加窗口大小变化监听
  const handleResize = () => {
    console.log('窗口大小变化，调整图表大小');
    try {
      if (ageChart && ageChartRef.value) ageChart.resize();
      if (genderChart && genderChartRef.value) genderChart.resize();
      if (regionChart && regionChartRef.value) regionChart.resize();
      if (timeSeriesChart && timeSeriesChartRef.value) timeSeriesChart.resize();
    } catch (error) {
      console.error('调整图表大小失败:', error);
    }
  };
  window.addEventListener('resize', handleResize);

  // 清理资源
  onUnmounted(() => {
    console.log('组件卸载，清理资源');
    // 销毁图表实例
    if (ageChart) {
      ageChart.dispose();
      ageChart = null;
    }
    if (genderChart) {
      genderChart.dispose();
      genderChart = null;
    }
    if (regionChart) {
      regionChart.dispose();
      regionChart = null;
    }
    if (timeSeriesChart) {
      timeSeriesChart.dispose();
      timeSeriesChart = null;
    }
    // 关闭EventSource连接
    if (eventSource) {
      eventSource.close();
      eventSource = null;
    }
    // 正确移除事件监听器
    window.removeEventListener('resize', handleResize);
  });
})
</script>

<style scoped>
.ai-analyze-container { padding: 20px; }
.form-card { margin-bottom: 20px; }
.results-container { margin-top: 20px; }
.summary-card { margin-bottom: 20px; }
.chart-card { margin-bottom: 20px; }
.metrics-card { margin-top: 20px; }
.chart-container { height: 400px; width: 100%; }
.summary-content { line-height: 1.6; }

/* 增强图表响应式 */
@media (max-width: 768px) {
  .chart-container { height: 300px; }
}

/* 卡片标题样式 */
.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
</style>
